<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInst } from 'naive-ui'
import { useLoading } from '@sa/hooks'
import { createRequiredFormRule } from '@/utils/form/rule'
import { deepClone } from '@/utils/common/tool'
import { editPushNotificationServices, fetchPushNotificationServices } from '@/service/api'
import { $t } from '~/src/locales'

const { loading, startLoading, endLoading } = useLoading(false)

const formModel = reactive<NotificationServices.PushNotification>(createDefaultFormModel())

function setTableData(data: Api.NotificationServices.PushNotification) {
  Object.assign(formModel, data)
  if (data.url !== 'null') {
    formModel.url = data.url
  }
}

async function getNotificationServices() {
  startLoading()
  const { data } = await fetchPushNotificationServices()
  if (data) {
    setTableData(data)
  }
  endLoading()
}

function createDefaultFormModel(): NotificationServices.PushNotification {
  return {
    url: ''
  }
}

const rules = {
  pushServer: createRequiredFormRule($t('common.pleaseCheckValue'))
}
const formRef = ref<HTMLElement & FormInst>()
async function handleSubmit() {
  await formRef.value?.validate()
  startLoading()
  const formData = deepClone(formModel)
  delete formData.config
  const data: any = await editPushNotificationServices(formData)
  if (!data.error) {
    window.$message?.success($t('common.saveSuccess'))
    endLoading()
    await getNotificationServices()
  }
}

function init() {
  getNotificationServices()
}

init()
</script>

<template>
  <NSpin :show="loading">
    <NForm ref="formRef" label-placement="left" :label-width="130" :model="formModel" :rules="rules">
      <NGrid :cols="24">
        <NFormItemGridItem
          :span="14"
          :label="$t('page.manage.notification.pushNotification.pushServer')"
          path="pushNotification.pushServer"
        >
          <NInput v-model:value="formModel.url" />
        </NFormItemGridItem>
      </NGrid>
      <NGrid :cols="24">
        <NFormItemGridItem :span="24" class="mt-20px">
          <div class="w-120px"></div>
          <NButton class="ml-20px w-72px" type="primary" @click="handleSubmit">
            {{ $t('common.save') }}
          </NButton>
        </NFormItemGridItem>
      </NGrid>
    </NForm>
  </NSpin>
</template>

<style lang="scss"></style>
